import React, { memo } from 'react';
import { number, string } from 'prop-types';

import './Rate.less';

const propTypes = {
  className: string,
  value: number.isRequired,
  max: number,
};

const defaultProps = {
  className: null,
  readonly: false,
  max: 5,
};

const Rate = ({ className, value, max }) => {
  const stars = new Array(max).fill(null);
  return (
    <div className="rate">
      {stars.map((item, i) => (
        <span className="star" key={i}>
          {i < value ? '★' : '☆'}
        </span>
      ))}
    </div>
  );
};

Rate.propTypes = propTypes;
Rate.defaultProps = defaultProps;
export default memo(Rate);
